<template>
  <div class="outbox" ref="outboxRef">
    <div class="tzfe" ref="tzfeRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { LocationType } from './type'

const tzfeRef = ref<HTMLDivElement>()
const outboxRef = ref<HTMLDivElement>()
const gapSize = ref<[number, number]>([3, 3])
const gapItemSize = ref<number>(60)

const gapDivList = computed(() => tzfeRef.value?.children)

// 创建一个 3 3 的网格
const initGap = () => {
  const [w, h] = gapSize.value
  const gapNum = w * h

  // 配置网格大小
  tzfeRef.value!.style.width = gapItemSize.value * w + 'px'
  tzfeRef.value!.style.height = gapItemSize.value * h + 'px'

  // 创建dom
  for (let i = 0; i < gapNum; i++) {
    const div = document.createElement('div')
    div.style.border = '1px solid #000'
    div.style.width = gapItemSize.value + 'px'
    div.style.width = gapItemSize.value + 'px'
    div.style.boxSizing = 'border-box'
    div.innerText = i + ''
    tzfeRef.value?.appendChild(div)
  }
}

// 在xy坐标创建数字模块
const initNumBlock = (x: number, y: number) => {
  const div = document.createElement('div')
  div.innerText = '2'
  div.style.background = '#000'
  div.style.width = gapItemSize.value + 'px'
  div.style.height = gapItemSize.value + 'px'
  div.style.boxSizing = 'border-box'
  div.style.position = 'absolute'
  div.style.left = x * gapItemSize.value + 'px'
  div.style.top = y * gapItemSize.value + 'px'
  div.style.transition = 'all 0.2s'
  div.tzfeLocation = [x, y]
  outboxRef.value?.appendChild(div)
  const index = x + y
  gapDivList.value![index].contactTzfeBox = div
}

// 移动边界判断
const moveLocation = (way: LocationType, size: number) => {}

// 移动数字 div在某个方向移动的大小
const moveNumBlock = (div: HTMLDivElement, way: LocationType, size: number) => {
  const [x, y] = div.tzfeLocation as [number, number]
  console.log(x, y)
  const [maxX, maxY] = gapSize.value

  const wayConfig: Record<LocationType, { way: LocationType; size: number; location: [number, number]; move: boolean }> = {
    top: {
      way: 'top',
      size: -size,
      location: [x, y - size < 0 ? y : y - size],
      move: y - size >= 0
    },
    bottom: {
      way: 'top',
      size,
      location: [x, y + size >= maxY ? y : y + size],
      move: y + size < maxY
    },
    left: {
      way: 'left',
      size: -size,
      location: [x - size < 0 ? x : x - size, y],
      move: x - size >= 0
    },
    right: {
      way: 'left',
      size,
      location: [x + size >= maxX ? x : x + size, y],
      move: x + size < maxX
    }
  }
  if (!wayConfig[way].move) {
    return
  }
  div.tzfeLocation = wayConfig[way].location
  const moveSize = gapItemSize.value * wayConfig[way].size
  const originSize = div.style[wayConfig[way].way]
  const afterSize = parseInt(originSize) + moveSize
  div.style[wayConfig[way].way] = afterSize + 'px'
}

// 键盘事件方法
const keydownEventFunction = (e: KeyboardEvent) => {
  const codeConfig = {
    ArrowRight: 'right',
    ArrowLeft: 'left',
    ArrowUp: 'top',
    ArrowDown: 'bottom'
  }
  gapDivList.value!.forEach((item) => {
    if (item.contactTzfeBox) {
      moveNumBlock(item.contactTzfeBox, codeConfig[e.code], 1)
    }
  })
  addRandomDiv()
}

// 监听键盘事件
const listenBoardEvent = () => {
  document.body.addEventListener('keydown', keydownEventFunction)
}

// 添加随机div
const addRandomDiv = () => {
  const [w, h] = gapSize.value
  const totalSize = w * h
  const outBoxChildren = outboxRef.value?.children.length
  if (outBoxChildren === totalSize) {
    alert('游戏结束')
    return
  }
  const x = Math.floor(Math.random() * 3)
  const y = Math.floor(Math.random() * 3)
  if (!gapDivList.value![x + y + 2].contactTzfeBox) {
    initNumBlock(x, y)
  } else {
    addRandomDiv()
  }
}

onMounted(() => {
  initGap()
  addRandomDiv()
  listenBoardEvent()
})

onUnmounted(() => {
  document.body.removeEventListener('keydown', keydownEventFunction)
})
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
